<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>小小相册</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<style>
			.hj-prompt {
				color: #d9534f;
			}
		</style>

	</head>

	<body>
		<nav class="navbar navbar-default">
			<div class="container-fluid">

				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
					<a class="navbar-brand" href="#">小小相册</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="/">全部相册</a>
						</li>
						<li class="active">
							<a href="upload">上传图片</a>
						</li>
						<li class="">
							<a href="" data-toggle="modal" data-target="#myModal">新增文件夹</a>
						</li>
					</ul>

				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>

		<div class="container">

			<ol class="breadcrumb">
				<li>
					<a href="/">首页</a>
				</li>
				<li class="active">上传</li>
			</ol>

			<form enctype="multipart/form-data" method="post" action="#">
				<div class="form-group" style="width: 60%;">
					<label for="exampleInputEmail1">选择文件夹</label>
					<select class="form-control hj-folder" name="h_folder">
						<% for( var i=0; i< ablums.length; i++){ %>
						<option>
							<%=ablums[i]%>
						</option>
						<% }%>
					</select>
				</div>

				<div class="form-group">
					<label for="exampleInputFile">选择上传图片</label>
					<input type="file" id="exampleInputFile" name="h_flie">
					<p> 请上传不大于2M的文件</p>
				</div>

				<button type="submit" class="btn btn-default">上传</button>
			</form>
		</div>

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">文件夹名称</h4>
					</div>
					<div class="modal-body">
						<input type="text" class="form-control" id="name" placeholder="请输入文件夹名称">
						<div class="form-group">
							<p class="hj-prompt"></p>
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<a class="btn btn-primary hj-btn">提交</a>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>

		<script>
			//获取文件夹名称 并调用ajax
			$(".hj-btn").click(function() {
				var name = $("#name").val();
				if(name == "" || null) {
					$(".hj-prompt").show().text("请输入文件夹名字！");
				} else {
					GetData(name);
					$('#myModal').modal('hide');
					$(".hj-prompt").hide();
					$("#name").val("");
				}
			})

			//--------------ajax------------

			//通过 ajax  将文件夹名字 传入后台
			function GetData(name) {
			var name="name="+name
			 $.get("/newfils",name,function(data,status){
			 	if(status=="success"){
			 		console.log(data[0]["name"])
			 		$(".hj-folder").append("<option>"+data[0]["name"]+"</option>");
			 	}
			 })
			}
		</script>

	</body>

</html>